<template>
  <view class="register-container">
    <view class="register-box">
      <view class="title">注册账号</view>
      
      <view class="input-group">
        <view class="input-item">
          <input 
            class="input" 
            type="text" 
            v-model="username" 
            placeholder="请输入用户名"
            @input="errors.username = ''"
          />
          <text class="error-text" v-if="errors.username">{{ errors.username }}</text>
        </view>
        
        <view class="input-item">
          <view class="email-group">
            <input 
              class="input email-input" 
              type="text" 
              v-model="email" 
              placeholder="请输入邮箱"
              @input="errors.email = ''"
            />
            <button 
              class="verify-btn" 
              :disabled="isCountingDown"
              @tap="sendVerificationCode"
            >
              {{ countDownText }}
            </button>
          </view>
          <text class="error-text" v-if="errors.email">{{ errors.email }}</text>
        </view>
        
        <view class="input-item">
          <input 
            class="input" 
            type="text" 
            v-model="verificationCode" 
            placeholder="请输入验证码"
            maxlength="6"
            @input="errors.verificationCode = ''"
          />
          <text class="error-text" v-if="errors.verificationCode">{{ errors.verificationCode }}</text>
        </view>
        
        <view class="input-item">
          <input 
            class="input" 
            type="password" 
            v-model="password" 
            placeholder="请输入密码"
            @input="errors.password = ''"
          />
          <text class="error-text" v-if="errors.password">{{ errors.password }}</text>
        </view>
        
        <view class="input-item">
          <input 
            class="input" 
            type="password" 
            v-model="confirmPassword" 
            placeholder="请确认密码"
            @input="errors.confirmPassword = ''"
          />
          <text class="error-text" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</text>
        </view>
      </view>
      
      <button class="register-btn" @tap="handleRegister">注册</button>
      
      <view class="login-link" @tap="goToLogin">
        已有账号？立即登录
      </view>
    </view>
  </view>
</template>

<script>
import { api } from '@/utils/request.js';

export default {
  data() {
    return {
      username: '',
      email: '',
      verificationCode: '',
      password: '',
      confirmPassword: '',
      countDown: 0,
      timer: null,
      errors: {
        username: '',
        email: '',
        verificationCode: '',
        password: '',
        confirmPassword: ''
      }
    };
  },
  
  computed: {
    isCountingDown() {
      return this.countDown > 0;
    },
    
    countDownText() {
      return this.isCountingDown ? `${this.countDown}s` : '发送验证码';
    }
  },
  
  methods: {
    validateEmail(email) {
      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
      return emailRegex.test(email);
    },
    
    validateFields() {
      let isValid = true;
      
      Object.keys(this.errors).forEach(key => {
        this.errors[key] = '';
      });
      
      if (!this.username.trim()) {
        this.errors.username = '请输入用户名';
        isValid = false;
      } else if (this.username.length < 2 || this.username.length > 20) {
        this.errors.username = '用户名长度应在2-20个字符之间';
        isValid = false;
      }
      
      if (!this.email.trim()) {
        this.errors.email = '请输入邮箱';
        isValid = false;
      } else if (!this.validateEmail(this.email)) {
        this.errors.email = '请输入正确的邮箱格式';
        isValid = false;
      }
      
      if (!this.verificationCode.trim()) {
        this.errors.verificationCode = '请输入验证码';
        isValid = false;
      } else if (this.verificationCode.length !== 6) {
        this.errors.verificationCode = '验证码应为6位数字';
        isValid = false;
      }
      
      if (!this.password) {
        this.errors.password = '请输入密码';
        isValid = false;
      } else if (this.password.length < 6 || this.password.length > 20) {
        this.errors.password = '密码长度应在6-20个字符之间';
        isValid = false;
      }
      
      if (!this.confirmPassword) {
        this.errors.confirmPassword = '请确认密码';
        isValid = false;
      } else if (this.password !== this.confirmPassword) {
        this.errors.confirmPassword = '两次输入的密码不一致';
        isValid = false;
      }
      
      return isValid;
    },
    
    async sendVerificationCode() {
      if (!this.email.trim()) {
        this.errors.email = '请输入邮箱';
        return;
      }
      
      if (!this.validateEmail(this.email)) {
        this.errors.email = '请输入正确的邮箱格式';
        return;
      }
      
      try {
       const res = await api.sendVerificationCode(this.email);
        this.countDown = 60;
        this.timer = setInterval(() => {
          if (this.countDown > 0) {
            this.countDown--;
          } else {
            clearInterval(this.timer);
          }
        }, 1000);
        
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        });
      } catch (error) {
        uni.showToast({
          title: error.message || '发送失败',
          icon: 'none'
        });
      }
    },
    
    async handleRegister() {
      if (!this.validateFields()) {
        const firstError = Object.values(this.errors).find(error => error);
        if (firstError) {
          uni.showToast({
            title: firstError,
            icon: 'none'
          });
        }
        return;
      }
      
      try {
        console.log(this.verificationCode)
        const res = await api.register({
          username: this.username,
          email: this.email,
          emailCode: this.verificationCode,
          password: this.password
        });
        console.log(res.code)
        console.log(res)
        if (res.code !== 200){
          uni.showToast({
            title: res.message || '发送失败',
            icon: 'none'
          });
        }else {
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          });
          setTimeout(() => {
            this.goToLogin();
          }, 1500);
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '注册失败',
          icon: 'none'
        });
      }
    },
    
    goToLogin() {
      uni.navigateBack();
    }
  },
  
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style lang="scss">
.register-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #4a90e2 0%, #357abd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  
  .register-box {
    width: 90%;
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 30rpx rgba(0, 0, 0, 0.1);
    
    .title {
      font-size: 40rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 60rpx;
      color: #333;
    }
    
    .input-group {
      margin-bottom: 40rpx;
      
      .input-item {
        margin-bottom: 20rpx;
        
        .input {
          width: 500rpx;
          height: 90rpx;
          background: #f5f5f5;
          border-radius: 45rpx;
          padding: 0 40rpx;
          font-size: 28rpx;
        }
        
        .error-text {
          font-size: 24rpx;
          color: #ff4d4f;
          padding-left: 40rpx;
          margin-top: 10rpx;
        }
      }
      
      .email-group {
        display: flex;
        
        .email-input {
          flex: 1;
          margin-right: 20rpx;
        }
        
        .verify-btn {
          width: 200rpx;
          height: 90rpx;
          background: #4a90e2;
          border-radius: 45rpx;
          color: #fff;
          font-size: 28rpx;
          line-height: 90rpx;
          text-align: center;
          padding: 0;
          
          &:disabled {
            background: #ccc;
          }
          
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
    
    .register-btn {
      width: 100%;
      height: 90rpx;
      background: #4a90e2;
      border-radius: 45rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      line-height: 90rpx;
      text-align: center;
      margin-bottom: 30rpx;
      
      &:active {
        opacity: 0.8;
      }
    }
    
    .login-link {
      text-align: center;
      font-size: 28rpx;
      color: #4a90e2;
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style> 